<template>
	<view class="tui-sale">
		<view style="padding: 0 10rpx;">
			<scroll-view scroll-y="true" enable-flex="true" scroll-x class="uni-swiper-tab">
				<view style="display: flex;">
					<block v-for="(tabBar,index) in list" :key="index">
						<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
							{{tabBar.name}}
							<view class="swiper-tab-line">
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<swiper :current="tabIndex" :style="{height:swiperheight+'rpx'}" @change="tabChange">
			<swiper-item v-for="(tabBar,index) in list" :key="index">
				<view class="swiper-item tui-flex">
					<view class="swiper-items" v-for="(content, conIndex) in tabBar.children"
					      :key="conIndex" @tap="navTo('/pagesA/ticket/components/ticketDetail?id=' + content.spuId)">
						<view class="swiper-box-image">
							<image :src="content.url" mode="aspectFill" class="swiper-item-image"></image>
							<view class="swiper-box-txt">{{content.title}}</view>
						</view>
						<view v-if="content.level !=''" class="swiper-box-level">{{content.description}}</view>
						<!--<view v-if="content.sold !=''" class="swiper-box-color">已售: {{content.sold}}</view>-->
						<view class="swiper-box-pric" v-for="(priceItem,priceIndex) in content.skuStockList"
							  v-if="priceIndex==0" :key="priceIndex">￥
							<!--<text style="font-size: 32rpx;">{{(content.price * 100).toFixed(2)}}</text>-->
							<text style="font-size: 32rpx;">{{priceItem.price || 0}}</text>
							<text style="color: #666;padding-left: 10rpx;">起</text>
						</view>
					</view>
				</view>
				<!--<view class="tui-tail" @tap="navTo(item.url)">
					查看更多
					<uni-icons type="arrowright" size="28" color="#666"></uni-icons>
				</view>-->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	
	export default {
		components: {
			uniIcons
		},
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				tabIndex: 0,
				swiperheight:900,//高度
				imageList: []
			}
		},
		created() {
		},
		methods: {
			toggleTab(index){
				this.tabIndex = index
				
			},
			//滑动切换swiper
			tabChange(e){
				const tabIndex = e.detail.current
				this.tabIndex = tabIndex
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tui-sale {
		margin: 20rpx 20rpx;
		.swiper-tab-list{
			color: #333;
			width: 100%;
			text-align: left;
			display: inline;
		}
		.active{
			font-size: 32rpx;
			font-weight: 600;
			color: #484848;
		}
		.active .swiper-tab-line{
			border-bottom: 6rpx solid #484848;
			width: 60%;
			// margin: 0 auto;
			border-radius: 20rpx;
		}
		.swiper-item {
			justify-content: flex-start;
			/*margin: 0 10rpx;*/
			.swiper-items {
				width: 30.5%;
				height: 230rpx;
				margin: 6% 10rpx 0;
				font-size: 26rpx;
				border-radius: 15rpx;
				.swiper-box-image {
					width: 100%;
					height: 196rpx;
					position: relative;
					.swiper-item-image {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
					.swiper-box-txt {
						position: absolute;
						bottom: 10rpx;
						left: 10rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
				.swiper-box-level {
					color: #FD893D;
				}
				.swiper-box-color{
					color: #666;
					font-size: 24rpx;
				}
				.swiper-box-pric{
					color: $uni-color-error;
				}
			}
			
		}
	}
</style>
